<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link href="${pageContext.request.contextPath}/images/favicon.ico" mce_href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <title>油站导航</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/weui.css"/>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/wechat.css"/>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    </head>
    <body ontouchstart>
        <div class="container js_container">

        </div>
        <div class="page">
            <div class="bd">
                <div class="weui_cells" id="result_station_div">
                	<c:forEach var="bean" items="${list }">
                   		<div class="weui_cell">
                            <div class="weui_cell_bd weui_cell_primary">
                                <p>${bean.stationName }<span class="navi-address">${bean.province }${bean.city }${bean.address }</span></p>
                            </div>
                            <div class="weui_cell_ft text-black">${bean.distance/1000 } km</div>
                            <img class="navi-icon" onclick="navigation.path(${bean.lat },${bean.lng },${bean.province }${bean.city }${bean.address },${bean.stationName })" src="${pageContext.request.contextPath}/images/navigation.png">
                        </div>
                    </c:forEach>
                
                
                    <div class="weui_cell">
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>孵化园加油站<span class="navi-address">高新区天府大道1000号</span></p>
                        </div>
                        <div class="weui_cell_ft text-black">0.3 km</div>
                        <img class="navi-icon" src="${pageContext.request.contextPath}/images/navigation.png">
                    </div>
                   
                </div>
            </div>
            <div class="footer">
                <span>本服务由</span>
                <img src="${pageContext.request.contextPath}/images/logo.png" title="油掌柜" />
                <span>提供技术支持</span>
            </div>
            
            <!-- loading toast -->
            <div id="loadingToast" class="weui_loading_toast" style="display:none;">
                <div class="weui_mask_transparent"></div>
                <div class="weui_toast">
                    <div class="weui_loading">
                        <div class="weui_loading_leaf weui_loading_leaf_0"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_1"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_2"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_3"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_4"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_5"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_6"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_7"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_8"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_9"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_10"></div>
                        <div class="weui_loading_leaf weui_loading_leaf_11"></div>
                    </div>
                    <p class="weui_toast_content">数据加载中</p>
                </div>
            </div>
        </div>
        <input type="text" id="timestamp" value="${map['timestamp']}"/>
		<input type="text" id="nonceStr" value="${map['nonceStr']}"/>
		<input type="text" id="signature" value="${map['signature']}"/>
		<input type="text" id="appId" value="${map['appid']}"/>
		<input type="text" id="code" value="${map['code']}"/>
		<input type="text" id="lat" />
		<input type="text" id="lng"/>
	    <script src="${pageContext.request.contextPath}/js/zepto.min.js"></script>
	    <script src="${pageContext.request.contextPath}/js/example.js"></script>
    </body>
    <script type="text/javascript">
	    var timestamp = $("#timestamp").val();//时间戳
	    var nonceStr = $("#nonceStr").val();//随机串
	    var signature = $("#signature").val();//签名
	    var appId = $("#appId").val();//签名
	    var code = $("#code").val();//签名
	    wx.config({
	  	  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	  	  appId: appId, // 必填，公众号的唯一标识
	  	  timestamp: timestamp, // 必填，生成签名的时间戳
	  	  nonceStr: nonceStr, // 必填，生成签名的随机串
	  	  signature: signature,// 必填，签名，见附录1
	  	  jsApiList: ['openLocation','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	    });
	    var navigation ={
	    		path : function (latitude,longitude,address,names){
			    	wx.openLocation({
			    	      latitude: latitude,
			    	      longitude: longitude,
			    	      name: names,
			    	      address: address,
			    	      scale: 14,
			    	      infoUrl: 'http://wx.wiz-tech.com.cn'
			    	  });
		    	},
		    	
	    		
	    };
	    wx.ready(function(){
	    	getLocation();
	    });
	    function getLocation(){
    		wx.getLocation({
		        success: function (res) {
		  		  var lat = res.latitude; // 经度，浮点数，范围为90 ~ -90
		  	      var lng = res.longitude; // 纬度，浮点数，范围为180 ~ -180。
		  	      $("#lat").val(lat);
		  	      $("#lng").val(lng);
		  	      alert(lat+"=============="+lng);
		  	      $("#loadingToast").show();
		  	    $.ajax({
			  	      type: "POST",
			  	      url: "${pageContext.request.contextPath}/navigation/stationList",
			  	      data: {lat:lat,lng:lng},
			  	      success: function(data){
			  	    	var result = '';
			  	    	  if(data.code == 200){
			  	    		  var list = data.records;
			  	    		$.each(data.records, function(name, value) {
			  	    			result += '<div class="weui_cell" onclick="navigation.path('+this.lat+','+this.lng+',\''+this.province+this.city+this.address+'\',\''+this.stationName+'\')">'+
		                            '<div class="weui_cell_bd weui_cell_primary">'+
		                                '<p>'+this.stationName+'<span class="navi-address">'+this.province+this.city+this.address+'</span></p>'+
			                            '<div class="weui_cell_ft text-black">'+this.distance/1000+'km</div>'+
			                            '<img class="navi-icon" src="${pageContext.request.contextPath}/images/navigation.png">'+
		                            '</div>'+
		                        '</div>';
			  	    			

			  	    		});
			  	    		$("#result_station_div").append(result);
			  	    		$("#loadingToast").hide();
			  	    	  }else{
				  	        alert("加油站列表加载失败！");
				  	      	$("#loadingToast").hide();
			  	    	  }
			  	      }
			  	   });
		        },
		        cancel: function (res) {
		          alert('你拒绝授权获取地理位置，无法获取油站列表！');
		        }
		      });
    	};

    </script>
</html>